@import 'wildcard/src/global-styles/breakpoints';

.batch-change-stats-card {
    &__changesets-pill {
        // Should be the same height as plain mdi icons.
        /* stylelint-disable declaration-property-unit-whitelist */
        height: 24px;
    }
    &__completeness {
        @media (--xs-breakpoint-down) {
            // Emulate h4 size on xs devices.
            font-size: 0.875rem;
            line-height: (20/14);
        }
    }
    &__state-badge {
        @media (--sm-breakpoint-down) {
            // Emulate h4 on sm and xs devices.
            font-size: 0.875rem;
            line-height: (20/14);
            font-weight: 600;
        }
    }
    &__diff-stat {
        @media (--sm-breakpoint-down) {
            margin-top: 1rem;
            flex-basis: 100%;
        }
    }
    &__stat {
        min-width: 0;
        @media (--sm-breakpoint-down) {
            flex-basis: 33%;
            padding-top: 1rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        @media (--xs-breakpoint-down) {
            flex-basis: 49.9%;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
    }
    &__divider {
        border-left: 1px solid var(--border-color-2);
        height: 2rem;
    }
}
